<!--  右上角消息提示  -->
{{!yield}}
<!-- <ul class="nav navbar-nav quick-actions"> -->
	<li class="dropdown divided">

	  <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
	    <i class="fa fa-bell"></i>
	    <span class="label label-transparent-black">3</span>
	  </a>

	  <ul class="dropdown-menu wide arrow nopadding bordered">
	    <li><h1>最新消息</h1></li>

	    <li>
	      <a href="#">
	        <span class="label label-green"><i class="fa fa-user"></i></span>
	        新增todo
	        <span class="small">18分钟前</span>
	      </a>
	    </li>

	    <li>
	      <a href="#">
	        <span class="label label-red"><i class="fa fa-power-off"></i></span>
	        完成todo2
	        <span class="small">27分钟前</span>
	      </a>
	    </li>

	    <li>
	      <a href="#">
	        <span class="label label-orange"><i class="fa fa-plus"></i></span>
	        完成todo3
	        <span class="small">36分钟前</span>
	      </a>
	    </li>

	    <li>
	      <a href="#">
	        <span class="label label-cyan"><i class="fa fa-power-off"></i></span>
	        todo4过期未完成
	        <span class="small">45分钟前</span>
	      </a>
	    </li>

	     <li><a href="#">更多 <i class="fa fa-angle-right"></i></a></li>
	  </ul>

	</li>


	<div class="personal-center" id="personal">
		<ul class="ddropdown-menu-personal arrow personal-settings" >

  	    <li style="background-color: #fff;">
			<!-- 背景色设置 -->
  	      <h3>点击换装</h3>
  	      <ul id="color-schemes">
  	        <li>
				{{#link-to 'todoitems' class="bg-1"}}{{/link-to}}
			</li>
			<li>
				{{#link-to 'todoitems' class="bg-2"}}{{/link-to}}
			</li>
			<li>
				{{#link-to 'todoitems' class="bg-3"}}{{/link-to}}
			</li>
			<li>
				{{#link-to 'todoitems' class="bg-4"}}{{/link-to}}
			</li>
			<li>
				{{#link-to 'todoitems' class="bg-5"}}{{/link-to}}
			</li>
			<li>
				{{#link-to 'todoitems' class="bg-6"}}{{/link-to}}
			</li>
  	      </ul>

  	    </li>

  	    <li class="divider"></li>

  	    <li class="ps-li">
  	      {{#link-to 'todoitems'}}<i class="fa fa-user"></i> 个人中心{{/link-to}}
  	    </li>
		<li class="ps-li">
  	      {{#link-to 'todoitems'}}<span class="glyphicon glyphicon-envelope"></span> {{userEmail}}{{/link-to}}
  	    </li>
		<li class="ps-li">
		  {{#link-to 'index'}}<span class="glyphicon glyphicon-home"></span> 天天清单网站{{/link-to}}
		</li>
  	    <!--
  	    <li>
  	      <a href="#"><i class="fa fa-calendar"></i> Calendar</a>
  	    </li>

  	    <li>
  	      <a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge badge-red" id="user-inbox">3</span></a>
  	    </li>
  	    -->

  	    <li class="divider"></li>

  	    <li class="ps-li">
  	      <a href="#" {{action 'invalidateSession'}}><i class="fa fa-power-off"></i> 退出</a>
  	    </li>
  	  </ul>
	</div>

	<!-- <li class="dropdown divided">
	  <a href="#mmenu" id="showRightMenu"><i class="fa fa-comments"></i></a>
	</li> -->

	<li class="dropdown divided user" id="current-user">
	  <div class="profile-photo" onclick="showOrHidePersonal()" style="cursor: pointer;margin-right: 10px;">
	    <img src={{profileImageURL}} alt="头像" width="45px" height="45px" />
	  </div>
	  <!-- <a class="dropdown-toggle options" data-toggle="dropdown" href="#" style="padding: 0 15px 0 0;"> -->
	  <!-- <a class="dropdown-toggle options" href="#" style="padding: 0 15px 0 0;"
	  	onclick="showOrHidePersonal()">
		  {{userEmail}} <i class="fa fa-caret-down"></i>
	  </a> -->

	</li>
<!-- </ul> -->

<script type="text/javascript">
	function showOrHidePersonal() {
		if ($("#personal").is(':hidden')) {
			$('#personal').show().addClass('animated zoomIn');;
		} else {
			$('#personal').hide();
		}
	}

	$(function() {
		$("#color-schemes li a").click(function() {
			var d = $(this).attr("class").split(" ")[0];
			console.log('d 1 = ' + d);
			var e = $("body").attr("class").split(" ").pop();
			if ('ember-application' === e) {
				e = '';
			}
			console.log('e 1 = ' + e);
			$("body").removeClass(e).addClass(d)
		});
	});
</script>
